<template>
    <el-drawer
        size="300"
        :show-close="false"
        :modal="false"
        :visible.sync="drawer">
        <div class="root">
          <div @click="addItem('CKTEXT')"><img :src="require('../../assets/images/cktext1.png')"/></div>
          <div @click="addItem('SHADOWTEXT')"><img :src="require('../../assets/images/shadowtext1.png')"/></div>
        </div>
    </el-drawer>
</template>
<script>

export default {
  data () {
    return {
      drawer: false
    }
  },
  computed: {
  },
  methods: {
    addItem (itemName) {
      this.$store.commit('addItem', { itemName })
    }
  },
  mounted () {
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
  .el-form-item {
        margin-bottom: 0px
    }
  .root {
      width: 300px;
      padding:5px;
      display:grid;
      justify-items: center;
      align-items: center;
      background: #fff;
      grid-template-rows:repeat(5,100px);
      grid-template-columns: repeat(2,145px);
      gap: 5px;
  }
  .root div {
      width:100%;
      height:100%;
      box-sizing: border-box;
      padding:0px;
      background-color: #aaa;
      background-clip: content-box;
      box-shadow: 0px 0px 2px #888888
  }
  .root div:hover {
    outline: 1px solid red
  }
  img {
      width:100%;
      height:100%
    }
</style>
